<template>
    <div class="bindVerify">
        <fx-header>
            <template #title>
                {{ title }}
            </template>
        </fx-header>
        <div class="content">
            <!-- 手机邮箱验证 -->
            <div v-if="type == 1 || type == 2">
                <ExInput :label="type == 2 ? $t('email') : $t('phoneNum')"
                    :placeholderText="type == 2 ? $t('entryEmail') : $t('entryPhone')" v-model="account" :area="isArea"
                    @selectArea="onSelectArea" :dialCode="dialCode" :icon="icon" />
                <p class="label mt-2 textColor">{{ $t('verificationCode') }}</p>
                <div class="iptbox inputBackground">
                    <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')"
                        v-model="verifyCode">
                    <span v-if="type != 3" @click="senCode">{{ $t('sendVerifyCode') }}<template v-if="time">
                            ({{ time }})s</template></span>
                </div>
            </div>
            <!-- 谷歌验证 -->
            <div v-if="type == 3">
                <div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
                    <div class="imgbox">
                        <van-image :src="google_auth_url">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20" />
                            </template>
                        </van-image>
                    </div>
                    <div class="code flex items-center justify-center textColor">{{ google_auth_secret }}
                        <img src="@/assets/image/reload.png" alt="" @click="getGoogleauth" />
                    </div>
                    <p class="tips">{{ $t('saveKeyTips') }}</p>
                    <div class="copy textColor" @click="copy">{{ $t('copy') }}</div>
                </div>
                <div class="flex justify-between mt-6 mb-3">
                    <div>{{ $t('googleVerificationCode') }}</div>
                    <div class="flex items-center">
                        <div class="colorMain" @click="googleverifyCode = ''">{{ $t('clear') }}</div>
                        <div class="colorMain ml-30" @click="pastCont">{{ $t('paste') }}</div>
                    </div>
                </div>
                <van-password-input :value="googleverifyCode" :gutter="16" :focused="showKeyboard"
                    @focus="showKeyboard = true" :mask="false" />
                <van-number-keyboard v-model="googleverifyCode" :show="showKeyboard" @blur="showKeyboard = false" />
                <div class="mt-2"></div>
                <div class="mt-5 bottom tabBackground textColor">
                    <p>{{ $t('precautions') }}</p>
                    <p>{{ $t('precautionsTips1') }}</p>
                    <p>{{ $t('precautionsTips2') }}</p>
                </div>
            </div>
            <van-button class="w-full" style="margin-top:10px;" type="primary" @click="submit">{{ $t('confirm') }}
            </van-button>
        </div>
        <nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName">
        </nationality-list>
    </div>
</template>

<script setup>
import ExInput from "@/components/ex-input/index.vue";
import { _sendVerifyCode } from "@/service/login.api";
import { _bindEmail, _bindPhone, _getGoogleauth, _bindGoogleauth } from "@/service/user.api.js";
import nationalityList from '../authentication/components/nationalityList.vue'
import { PasswordInput, NumberKeyboard, showToast, Image as VanImage } from 'vant';
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import useClipboard from "vue-clipboard3";
const route = useRoute()
const router = useRouter()
const { t } = useI18n()
const { toClipboard } = useClipboard();

const title = ref('')
const account = ref('')
const isArea = ref(false)
const type = ref(0)
const verifyCode = ref('')
const google_auth_secret = ref('')
const showKeyboard = ref(false)
const googleverifyCode = ref('') //谷歌验证码code
const imgshow = ref(true)
const google_auth_url = ref('')
const dialCode = ref(0) //电话号前缀
const timer = ref(null)
const time = ref(0)
const icon = ref('')

onMounted(() => {
    init();
    clearInterval(timer.value)
    timer.value = null
})


const init = () => {
    type.value = route.query.type;
    if (type.value == 1) {
        title.value = t("bindPhone");
        isArea.value = true
    } else if (type.value == 2) {
        title.value = t("bindEmail");
    } else if (type.value == 3) {
        title.value = t("googleAuthenticatorEn");
        getGoogleauth()
    }
}
const senCode = () => {
    if (type.value == 2) {
        if (account.value == '') {
            showToast(t('entryEmail'));
            return
        }
        if (account.value.indexOf('@') === -1) {
            showToast(t('请输入正确的邮箱地址'));
            return
        }
    }
    if (type.value == 1 && account.value == '') {
        showToast(t('entryPhone'));
        return
    }
    if (type.value == 1 && isNaN(account.value)) {
        showToast(t('请输入正确的手机号码'));
        return
    }
    if (time.value > 0) {
        return false
    }
    _sendVerifyCode({
        target: type.value == 1 ? `${dialCode.value}${account.value}` : account.value,
    }).then((res) => {
        showToast(t('sendSuccess'));
        time.value = 30;
        timer.value = setInterval(() => {
            if (time.value > 0) {
                time.value = time.value - 1
            } else {
                time.value = 0;
                clearInterval(timer.value)
                timer.value = null
            }
        }, 1000);
    })
}
const submit = () => {
    if (type.value == 2) {
        if (account.value == '') {
            showToast(t('entryEmail'));
            return
        }
        if (account.value.indexOf('@') === -1) {
            showToast(t('请输入正确的邮箱地址'));
            return
        }
    }
    if (type.value == 1 && account.value == '') {
        showToast(t('entryPhone'));
        return
    }
    if (type.value == 1 && isNaN(account.value)) {
        showToast(t('请输入正确的手机号码'));
        return
    }
    if (type.value == 1) {
        bindPhone()
    } else if (type.value == 2) {
        bindEmail()
    } else if (type.value == 3) {
        bindGoogleauth()
    }
}
const bindEmail = () => {
    _bindEmail({
        email: account.value,
        verifcode: verifyCode.value
    }).then((res) => {
        showToast(t('bindSuccess'));
        router.push('/safety')
    })
}
const bindPhone = () => {
    _bindPhone({
        phone: `${dialCode.value || ""}${account.value}`,
        verifcode: verifyCode.value
    }).then((res) => {
        showToast(t('bindSuccess'));
        router.push('/safety')
    })
}
const getGoogleauth = () => {
    _getGoogleauth({
    }).then((res) => {
        google_auth_secret.value = res.googleAuthSecret;
        google_auth_url.value = res.googleAuthImg
    })
}
const bindGoogleauth = () => {
    if (!googleverifyCode.value) {
        showToast(t('请输入谷歌验证码'))
        return
    }
    _bindGoogleauth({
        secret: google_auth_secret.value,
        code: googleverifyCode.value
    }).then((res) => {
        let google_auth_bind = res.google_auth_bind;
        if (google_auth_bind) {
            showToast(t('bindSuccess'));
            router.push('/safety')
        } else {
            showToast(t('bindFailed'));
        }
    })
}

const copy = async () => {
    try {
        await toClipboard(google_auth_secret.value);
        showToast(t('copySuccess'));
    } catch (e) {
        console.error(e);
    }
}
const pastCont = async () => {
    googleverifyCode.value = await navigator.clipboard.readText();
}

// 选择了国家
const getName = (params) => {
    icon.value = params.code;
    dialCode.value = params.dialCode;
}

const controlChildRef = ref(null)
const onSelectArea = () => {
    controlChildRef.value.open();
}

watch(googleverifyCode, (val, oldVal) => {
    if (googleverifyCode.value.length === 6) {
        showKeyboard.value = false
    }
})

</script>

<style lang="scss" scoped>
:deep(.van-key) {
    background: $black;
}

:deep(.van-number-keyboard__body) {
    background: $selectSymbol_background;
}

.bindVerify {
    width: 100%;
    box-sizing: border-box;
}

.content {
    font-size: 12px;
    padding: 0 16px;
}

.iptbox {
    height: 44px;
    margin-top: 8px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;

    input {
        flex: 1;
        height: 100%;
        border: none;
    }

    span {
        color: $color_main;
    }
}

.imgbox {
    border: 1px solid $border-grey;
    padding: 5px;
    width: 182px;
    height: 182px;
    box-sizing: border-box;

    img {
        width: 100%;
        height: 100%;
    }
}

.code {
    font-size: 15px;
    font-weight: 300;
    line-height: 18px;
    margin-top: 22px;
    height: 18px;

    img {
        width: 14px;
        height: 14px;
        margin-left: 5px;
    }
}

.tips {
    margin-top: 10px;
    color: #999999;
}

.copy {
    border-radius: 4px;
    width: 132px;
    height: 40px;
    margin-top: 16px;
    border: 1px solid $border-grey;
    line-height: 40px;
}

.bottom {
    padding: 20px 16px 7px 16px;

    p {
        padding-bottom: 13px;
    }
}

.van-password-input {
    margin: 0;
}

.van-password-input__security li {
    background: $input_background;
    width: 50px;
    height: 50px;
    color: $text_color;
}

:deep(.van-password-input__security li) {
    background: $input_background;
    width: 50px;
    height: 50px;
    color: $text_color;
}
</style>
